<template>
    <el-dialog :title="!dataForm.id?'新增':'修改'" :visible.sync="visible">
      <el-form :model="dataForm" :rules="dataFormRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input placeholder="请输入角色名称(长度为4-15个字符)" v-model="dataForm.roleName"/>
        </el-form-item>
        <el-form-item label="状态" prop="available">
          <el-radio-group v-model="dataForm.available">
            <el-radio :label="1" border>可用</el-radio>
            <el-radio :label="-1" border>禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input type="textarea" :rows="2" placeholder="请输入角色描述" v-model="dataForm.description"/>
        </el-form-item>
        <el-form-item size="mini" label="授权">
          <el-tree
            :data="menuList"
            :props="menuListTreeProps"
            node-key="id"
            ref="resourceListTree"
            :default-expand-all="true"
            show-checkbox></el-tree>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
</template>

<script>
  import API from '@/api'

  export default {
    name: "add-or-update",
    data(){
      return {
        visible: false,
        dataForm:{},
        dataFormInit:{
          id:'',
          available: 1,
          roleName:'',
          description:''
        },
        dataFormRule:{
          roleName:[
            {required:true,message:'角色名称不能为空',trigger:'blur'},
            {min: 4, max: 15, message: '长度为4-15个字符', trigger: 'blur'}
          ],
          available:[
            {required:true,message:'状态不能为空',trigger:'blur'}
          ]
        },

        menuList:[],
        menuListTreeProps:{
          label:'resourcename',
          children:'list'
        },
        tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
      }
    },
    methods:{
      init(data){
        this.dataForm = data?data:Object.assign({},this.dataFormInit);
        if(!data) {
          API.user.info().then(res => {
            this.dataForm.creatorid = res.data.user.id;
          }).catch(error => {
            console.log(error);
          })
        }
        API.resource.nav().then(res=>{
          this.menuList = res.data.menuList;
        }).then(()=>{
          if(this.dataForm.id){
            API.role.info(this.dataForm.id).then((res)=>{
              if(!res.data.code){
                this.dataForm = res.data.role;
                let idx = this.dataForm.resIdList.indexOf(this.tempKey);
                if(idx !== -1){
                  this.dataForm.resIdList.splice(idx,this.dataForm.resIdList.length-idx);
                }
                this.$nextTick(()=>{
                  this.$refs.resourceListTree.setCheckedKeys([]);
                  this.$refs.resourceListTree.setCheckedKeys(this.dataForm.resIdList);
                });
                this.visible = true;
              }
            })
          }
          this.visible = true;
        });
      },
      dataFormSubmit(){
        this.$refs['dataForm'].validate((valid)=>{
          if(valid){
            let params = {
              'id':this.dataForm.id || undefined,
              'roleName':this.dataForm.roleName,
              'available':this.dataForm.available,
              'description':this.dataForm.description,
              'resIdList':[].concat(this.$refs.resourceListTree.getCheckedKeys(), [this.tempKey], this.$refs.resourceListTree.getHalfCheckedKeys())
            };
            let tick = !this.dataForm.id ? API.role.add(params):API.role.modify(params);
            tick.then((res)=>{
              if(!res.data.code){
                this.$message({
                  message:"操作成功",
                  type:"success",
                });
                this.$emit('refreshDataList');
                this.visible = false;
              }else {
              this.$message({type:'error',dangerouslyUseHTMLString: true,message:res.data.msg,center:true});
              }
            }).catch((error)=>{
              console.log(error);
            });
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
